<html lang="en">

<head>
  <style>
    html {
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto
    }

    html,
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      background-color: rgb(54, 50, 119);
      align-items: center;
      justify-content: center;
      color: #fafafa;
    }

    .loading {
      text-align: center;
    }
  </style>

</head>

<body>
  <div class="loading">
    <div>
      <img
        src="" />
      <img
        src="" />
    </div>
    <h3>Loading &laquo; typeahead - template &raquo; demo</h3>
  </div>
  <form id="mainForm" method="post" action="https://stackblitz.com/run?file=app/typeahead-template.ts" target="_self">
    <input type="hidden" name="project[template]" value="angular-cli">
    <input type="hidden" name="project[title]" value="ng-bootstrap demo - Typeahead - Template">
    <input type="hidden" name="project[description]"
      value="Example usage of the typeahead widget from https://ng-bootstrap.github.io">
    <input type="hidden" name="project[dependencies]" value="{&#34;@angular/animations&#34;:&#34;~18.0.0&#34;,&#34;@angular/core&#34;:&#34;~18.0.0&#34;,&#34;@angular/common&#34;:&#34;~18.0.0&#34;,&#34;@angular/compiler&#34;:&#34;~18.0.0&#34;,&#34;@angular/compiler-cli&#34;:&#34;~18.0.0&#34;,&#34;@angular/platform-browser&#34;:&#34;~18.0.0&#34;,&#34;@angular/platform-browser-dynamic&#34;:&#34;~18.0.0&#34;,&#34;@angular/router&#34;:&#34;~18.0.0&#34;,&#34;@angular/forms&#34;:&#34;~18.0.0&#34;,&#34;@angular/localize&#34;:&#34;~18.0.0&#34;,&#34;@ng-bootstrap/ng-bootstrap&#34;:&#34;17.0.1&#34;,&#34;@popperjs/core&#34;:&#34;2.11.8&#34;,&#34;rxjs&#34;:&#34;~7.5.5&#34;,&#34;typescript&#34;:&#34;~5.4.5&#34;,&#34;zone.js&#34;:&#34;~0.14.2&#34;}">
    
    <input type="hidden" name="project[tags][]" value="angular">
    
    <input type="hidden" name="project[tags][]" value="bootstrap">
    
    <input type="hidden" name="project[tags][]" value="ng-bootstrap">
    
    <input type="hidden" name="project[tags][]" value="typeahead">
    
    
    <input type="hidden" name="project[files][src/polyfills.ts]" value="/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called &#34;evergreen&#34; browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari &gt;= 10, Chrome &gt;= 55 (including Opera),
 * Edge &gt;= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
import &#39;zone.js&#39;; // Included with Angular CLI.

/***************************************************************************************************
 * APPLICATION IMPORTS
 */
import &#39;@angular/localize/init&#39;;
">
    
    <input type="hidden" name="project[files][tsconfig.json]" value="{
	&#34;compileOnSave&#34;: false,
	&#34;compilerOptions&#34;: {
		&#34;baseUrl&#34;: &#34;./&#34;,
		&#34;outDir&#34;: &#34;./dist/out-tsc&#34;,
		&#34;sourceMap&#34;: true,
		&#34;declaration&#34;: false,
		&#34;downlevelIteration&#34;: true,
		&#34;experimentalDecorators&#34;: true,
		&#34;moduleResolution&#34;: &#34;node&#34;,
		&#34;importHelpers&#34;: true,
		&#34;target&#34;: &#34;es2020&#34;,
		&#34;module&#34;: &#34;es2020&#34;,
		&#34;typeRoots&#34;: [&#34;node_modules/@types&#34;],
		&#34;lib&#34;: [&#34;es2020&#34;, &#34;dom&#34;]
	},
	&#34;angularCompilerOptions&#34;: {
		&#34;enableIvy&#34;: true,
		&#34;fullTemplateTypeCheck&#34;: true,
		&#34;strictTemplates&#34;: true,
		&#34;strictInjectionParameters&#34;: true
	}
}
">
    
    <input type="hidden" name="project[files][angular.json]" value="{
	&#34;version&#34;: 1,
	&#34;newProjectRoot&#34;: &#34;projects&#34;,
	&#34;projects&#34;: {
		&#34;demo&#34;: {
			&#34;root&#34;: &#34;&#34;,
			&#34;sourceRoot&#34;: &#34;src&#34;,
			&#34;projectType&#34;: &#34;application&#34;,
			&#34;prefix&#34;: &#34;app&#34;,
			&#34;schematics&#34;: {},
			&#34;architect&#34;: {
				&#34;build&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:browser&#34;,
					&#34;options&#34;: {
						&#34;outputPath&#34;: &#34;dist/demo&#34;,
						&#34;index&#34;: &#34;src/index.html&#34;,
						&#34;main&#34;: &#34;src/main.ts&#34;,
						&#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
						&#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
						&#34;assets&#34;: [],
						&#34;styles&#34;: [],
						&#34;scripts&#34;: []
					},
					&#34;configurations&#34;: {
						&#34;production&#34;: {
							&#34;fileReplacements&#34;: [{}],
							&#34;optimization&#34;: true,
							&#34;outputHashing&#34;: &#34;all&#34;,
							&#34;sourceMap&#34;: false,
							&#34;extractCss&#34;: true,
							&#34;namedChunks&#34;: false,
							&#34;aot&#34;: true,
							&#34;extractLicenses&#34;: true,
							&#34;vendorChunk&#34;: false,
							&#34;buildOptimizer&#34;: true
						}
					}
				},
				&#34;serve&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:dev-server&#34;,
					&#34;options&#34;: {
						&#34;browserTarget&#34;: &#34;demo:build&#34;
					},
					&#34;configurations&#34;: {
						&#34;production&#34;: {
							&#34;browserTarget&#34;: &#34;demo:build:production&#34;
						}
					}
				},
				&#34;extract-i18n&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:extract-i18n&#34;,
					&#34;options&#34;: {
						&#34;browserTarget&#34;: &#34;demo:build&#34;
					}
				},
				&#34;test&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:karma&#34;,
					&#34;options&#34;: {
						&#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
						&#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
						&#34;styles&#34;: [],
						&#34;scripts&#34;: [],
						&#34;assets&#34;: []
					}
				},
				&#34;lint&#34;: {
					&#34;builder&#34;: &#34;@angular-devkit/build-angular:tslint&#34;,
					&#34;options&#34;: {
						&#34;tsConfig&#34;: [&#34;tsconfig.json&#34;],
						&#34;exclude&#34;: [&#34;**/node_modules/**&#34;]
					}
				}
			}
		}
	},
	&#34;defaultProject&#34;: &#34;demo&#34;
}
">
    
    <input type="hidden" name="project[files][src/index.html]" value="&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;ng-bootstrap demo - Typeahead - Template&lt;/title&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.css&#34; /&gt;
  &lt;style&gt;
    /* Sortable table demo */

th[sortable] {
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
}

th[sortable].desc:before,
th[sortable].asc:before {
	content: &#39;&#39;;
	display: block;
	background: url(&#39;&#39;)
		no-repeat;
	background-size: 22px;
	width: 22px;
	height: 22px;
	float: left;
	margin-left: -22px;
}

th[sortable].desc:before {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg);
}

/* Filtering table demo */
ngbd-table-filtering span.ngb-highlight {
	background-color: yellow;
}

/* Complete table demo */
ngbd-table-complete span.ngb-highlight {
	background-color: yellow;
}

ngb-carousel .picsum-img-wrapper {
	position: relative;
	height: 0;
	padding-top: 55%; /* Keep ratio for 900x500 images */
}

ngb-carousel .picsum-img-wrapper &gt; img {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}

  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&#34;container-fluid&#34;&gt;

    &lt;hr&gt;

    &lt;p&gt;
      This is a demo example forked from the &lt;strong&gt;ng-bootstrap&lt;/strong&gt; project: Angular powered Bootstrap.
      Visit &lt;a href=&#34;https://ng-bootstrap.github.io/&#34; target=&#34;_blank&#34;&gt;https://ng-bootstrap.github.io&lt;/a&gt; for more
      widgets and demos.
    &lt;/p&gt;

    &lt;hr&gt;
    &lt;ngbd-typeahead-template&gt;&lt;/ngbd-typeahead-template&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
">
    
    <input type="hidden" name="project[files][src/main.ts]" value="import &#39;./polyfills&#39;;
import {provideHttpClient, withNoXsrfProtection} from &#39;@angular/common/http&#39;;
import {bootstrapApplication} from &#39;@angular/platform-browser&#39;;
import {NgbdTypeaheadTemplate} from &#39;./app/typeahead-template&#39;;

bootstrapApplication(NgbdTypeaheadTemplate, {
  providers: [
    provideHttpClient(withNoXsrfProtection()),
  ],
})
.then(ref =&gt; {
  // Ensure Angular destroys itself on hot reloads.
  if (window[&#39;ngRef&#39;]) {
    window[&#39;ngRef&#39;].destroy();
  }
  window[&#39;ngRef&#39;] = ref;

  // Otherwise, log the boot error
})
.catch(err =&gt; console.error(err));
">
    
    <input type="hidden" name="project[files][src/app/typeahead-template.html]" value="&lt;p&gt;
	A typeahead example that uses a custom template for results display, an object as the model, and the highlight
	directive to highlight the term inside the custom template.
&lt;/p&gt;

&lt;ng-template #rt let-r=&#34;result&#34; let-t=&#34;term&#34;&gt;
	&lt;img [src]=&#34;&#39;https://upload.wikimedia.org/wikipedia/commons/thumb/&#39; + r[&#39;flag&#39;]&#34; class=&#34;me-1&#34; style=&#34;width: 16px&#34; /&gt;
	&lt;ngb-highlight [result]=&#34;r.name&#34; [term]=&#34;t&#34;&gt;&lt;/ngb-highlight&gt;
&lt;/ng-template&gt;

&lt;div class=&#34;mb-3 row&#34;&gt;
	&lt;label for=&#34;typeahead-template&#34; class=&#34;col-xs-3 col-sm-auto col-form-label&#34;&gt;Search for a state:&lt;/label&gt;
	&lt;div class=&#34;col&#34;&gt;
		&lt;input
			id=&#34;typeahead-template&#34;
			type=&#34;text&#34;
			class=&#34;form-control col&#34;
			[(ngModel)]=&#34;model&#34;
			[ngbTypeahead]=&#34;search&#34;
			[resultTemplate]=&#34;rt&#34;
			[inputFormatter]=&#34;formatter&#34;
		/&gt;
	&lt;/div&gt;
&lt;/div&gt;

&lt;hr /&gt;
&lt;pre&gt;Model: {{ model | json }}&lt;/pre&gt;
">
    
    <input type="hidden" name="project[files][src/app/typeahead-template.ts]" value="import { Component } from &#39;@angular/core&#39;;
import { NgbTypeaheadModule } from &#39;@ng-bootstrap/ng-bootstrap&#39;;
import { Observable, OperatorFunction } from &#39;rxjs&#39;;
import { debounceTime, map } from &#39;rxjs/operators&#39;;
import { FormsModule } from &#39;@angular/forms&#39;;
import { JsonPipe } from &#39;@angular/common&#39;;

const statesWithFlags: { name: string; flag: string }[] = [
	{ name: &#39;Alabama&#39;, flag: &#39;5/5c/Flag_of_Alabama.svg/45px-Flag_of_Alabama.svg.png&#39; },
	{ name: &#39;Alaska&#39;, flag: &#39;e/e6/Flag_of_Alaska.svg/43px-Flag_of_Alaska.svg.png&#39; },
	{ name: &#39;Arizona&#39;, flag: &#39;9/9d/Flag_of_Arizona.svg/45px-Flag_of_Arizona.svg.png&#39; },
	{ name: &#39;Arkansas&#39;, flag: &#39;9/9d/Flag_of_Arkansas.svg/45px-Flag_of_Arkansas.svg.png&#39; },
	{ name: &#39;California&#39;, flag: &#39;0/01/Flag_of_California.svg/45px-Flag_of_California.svg.png&#39; },
	{ name: &#39;Colorado&#39;, flag: &#39;4/46/Flag_of_Colorado.svg/45px-Flag_of_Colorado.svg.png&#39; },
	{ name: &#39;Connecticut&#39;, flag: &#39;9/96/Flag_of_Connecticut.svg/39px-Flag_of_Connecticut.svg.png&#39; },
	{ name: &#39;Delaware&#39;, flag: &#39;c/c6/Flag_of_Delaware.svg/45px-Flag_of_Delaware.svg.png&#39; },
	{ name: &#39;Florida&#39;, flag: &#39;f/f7/Flag_of_Florida.svg/45px-Flag_of_Florida.svg.png&#39; },
	{
		name: &#39;Georgia&#39;,
		flag: &#39;5/54/Flag_of_Georgia_%28U.S._state%29.svg/46px-Flag_of_Georgia_%28U.S._state%29.svg.png&#39;,
	},
	{ name: &#39;Hawaii&#39;, flag: &#39;e/ef/Flag_of_Hawaii.svg/46px-Flag_of_Hawaii.svg.png&#39; },
	{ name: &#39;Idaho&#39;, flag: &#39;a/a4/Flag_of_Idaho.svg/38px-Flag_of_Idaho.svg.png&#39; },
	{ name: &#39;Illinois&#39;, flag: &#39;0/01/Flag_of_Illinois.svg/46px-Flag_of_Illinois.svg.png&#39; },
	{ name: &#39;Indiana&#39;, flag: &#39;a/ac/Flag_of_Indiana.svg/45px-Flag_of_Indiana.svg.png&#39; },
	{ name: &#39;Iowa&#39;, flag: &#39;a/aa/Flag_of_Iowa.svg/44px-Flag_of_Iowa.svg.png&#39; },
	{ name: &#39;Kansas&#39;, flag: &#39;d/da/Flag_of_Kansas.svg/46px-Flag_of_Kansas.svg.png&#39; },
	{ name: &#39;Kentucky&#39;, flag: &#39;8/8d/Flag_of_Kentucky.svg/46px-Flag_of_Kentucky.svg.png&#39; },
	{ name: &#39;Louisiana&#39;, flag: &#39;e/e0/Flag_of_Louisiana.svg/46px-Flag_of_Louisiana.svg.png&#39; },
	{ name: &#39;Maine&#39;, flag: &#39;3/35/Flag_of_Maine.svg/45px-Flag_of_Maine.svg.png&#39; },
	{ name: &#39;Maryland&#39;, flag: &#39;a/a0/Flag_of_Maryland.svg/45px-Flag_of_Maryland.svg.png&#39; },
	{ name: &#39;Massachusetts&#39;, flag: &#39;f/f2/Flag_of_Massachusetts.svg/46px-Flag_of_Massachusetts.svg.png&#39; },
	{ name: &#39;Michigan&#39;, flag: &#39;b/b5/Flag_of_Michigan.svg/45px-Flag_of_Michigan.svg.png&#39; },
	{ name: &#39;Minnesota&#39;, flag: &#39;b/b9/Flag_of_Minnesota.svg/46px-Flag_of_Minnesota.svg.png&#39; },
	{ name: &#39;Mississippi&#39;, flag: &#39;4/42/Flag_of_Mississippi.svg/45px-Flag_of_Mississippi.svg.png&#39; },
	{ name: &#39;Missouri&#39;, flag: &#39;5/5a/Flag_of_Missouri.svg/46px-Flag_of_Missouri.svg.png&#39; },
	{ name: &#39;Montana&#39;, flag: &#39;c/cb/Flag_of_Montana.svg/45px-Flag_of_Montana.svg.png&#39; },
	{ name: &#39;Nebraska&#39;, flag: &#39;4/4d/Flag_of_Nebraska.svg/46px-Flag_of_Nebraska.svg.png&#39; },
	{ name: &#39;Nevada&#39;, flag: &#39;f/f1/Flag_of_Nevada.svg/45px-Flag_of_Nevada.svg.png&#39; },
	{ name: &#39;New Hampshire&#39;, flag: &#39;2/28/Flag_of_New_Hampshire.svg/45px-Flag_of_New_Hampshire.svg.png&#39; },
	{ name: &#39;New Jersey&#39;, flag: &#39;9/92/Flag_of_New_Jersey.svg/45px-Flag_of_New_Jersey.svg.png&#39; },
	{ name: &#39;New Mexico&#39;, flag: &#39;c/c3/Flag_of_New_Mexico.svg/45px-Flag_of_New_Mexico.svg.png&#39; },
	{ name: &#39;New York&#39;, flag: &#39;1/1a/Flag_of_New_York.svg/46px-Flag_of_New_York.svg.png&#39; },
	{ name: &#39;North Carolina&#39;, flag: &#39;b/bb/Flag_of_North_Carolina.svg/45px-Flag_of_North_Carolina.svg.png&#39; },
	{ name: &#39;North Dakota&#39;, flag: &#39;e/ee/Flag_of_North_Dakota.svg/38px-Flag_of_North_Dakota.svg.png&#39; },
	{ name: &#39;Ohio&#39;, flag: &#39;4/4c/Flag_of_Ohio.svg/46px-Flag_of_Ohio.svg.png&#39; },
	{ name: &#39;Oklahoma&#39;, flag: &#39;6/6e/Flag_of_Oklahoma.svg/45px-Flag_of_Oklahoma.svg.png&#39; },
	{ name: &#39;Oregon&#39;, flag: &#39;b/b9/Flag_of_Oregon.svg/46px-Flag_of_Oregon.svg.png&#39; },
	{ name: &#39;Pennsylvania&#39;, flag: &#39;f/f7/Flag_of_Pennsylvania.svg/45px-Flag_of_Pennsylvania.svg.png&#39; },
	{ name: &#39;Rhode Island&#39;, flag: &#39;f/f3/Flag_of_Rhode_Island.svg/32px-Flag_of_Rhode_Island.svg.png&#39; },
	{ name: &#39;South Carolina&#39;, flag: &#39;6/69/Flag_of_South_Carolina.svg/45px-Flag_of_South_Carolina.svg.png&#39; },
	{ name: &#39;South Dakota&#39;, flag: &#39;1/1a/Flag_of_South_Dakota.svg/46px-Flag_of_South_Dakota.svg.png&#39; },
	{ name: &#39;Tennessee&#39;, flag: &#39;9/9e/Flag_of_Tennessee.svg/46px-Flag_of_Tennessee.svg.png&#39; },
	{ name: &#39;Texas&#39;, flag: &#39;f/f7/Flag_of_Texas.svg/45px-Flag_of_Texas.svg.png&#39; },
	{ name: &#39;Utah&#39;, flag: &#39;f/f6/Flag_of_Utah.svg/45px-Flag_of_Utah.svg.png&#39; },
	{ name: &#39;Vermont&#39;, flag: &#39;4/49/Flag_of_Vermont.svg/46px-Flag_of_Vermont.svg.png&#39; },
	{ name: &#39;Virginia&#39;, flag: &#39;4/47/Flag_of_Virginia.svg/44px-Flag_of_Virginia.svg.png&#39; },
	{ name: &#39;Washington&#39;, flag: &#39;5/54/Flag_of_Washington.svg/46px-Flag_of_Washington.svg.png&#39; },
	{ name: &#39;West Virginia&#39;, flag: &#39;2/22/Flag_of_West_Virginia.svg/46px-Flag_of_West_Virginia.svg.png&#39; },
	{ name: &#39;Wisconsin&#39;, flag: &#39;2/22/Flag_of_Wisconsin.svg/45px-Flag_of_Wisconsin.svg.png&#39; },
	{ name: &#39;Wyoming&#39;, flag: &#39;b/bc/Flag_of_Wyoming.svg/43px-Flag_of_Wyoming.svg.png&#39; },
];

@Component({
	selector: &#39;ngbd-typeahead-template&#39;,
	standalone: true,
	imports: [NgbTypeaheadModule, FormsModule, JsonPipe],
	templateUrl: &#39;./typeahead-template.html&#39;,
	styles: `.form-control { width: 300px; }`,
})
export class NgbdTypeaheadTemplate {
	model: any;

	search: OperatorFunction&lt;string, readonly { name; flag }[]&gt; = (text$: Observable&lt;string&gt;) =&gt;
		text$.pipe(
			debounceTime(200),
			map((term) =&gt;
				term === &#39;&#39;
					? []
					: statesWithFlags.filter((v) =&gt; v.name.toLowerCase().indexOf(term.toLowerCase()) &gt; -1).slice(0, 10),
			),
		);

	formatter = (x: { name: string }) =&gt; x.name;
}
">
    
  </form>
  <script>document.getElementById("mainForm").submit();</script>
</body>

</html>
